.login {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  .login__draggable-area {
    -webkit-app-region: drag;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    position: absolute;
  }

  .login__form {
    max-width: 320px;
    margin: 0 auto;
    padding: 10px;
  }

  .login__logo {
    margin-bottom: 50px;
    text-align: center;

    svg {
      border-radius: 50%;
      border: 1px solid lighten($gray, 30%);
    }
  }

  .login__fields {
    border: 1px solid lighten($gray, 25%);
    border-radius: $border-radius;
  }

  .login__field {
    display: flex;
    align-items: center;
    padding: 1px;
    border-bottom: 1px solid lighten($gray, 30%);

    &:last-child {
      border-bottom: none;
    }

    .login__field-label {
      flex: none;
      width: 7.5em;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: $bold;
      text-transform: uppercase;
      color: $gray;
    }

    .login__field-control {
      flex: 1 1 auto;
    }

    input {
      width: 100%;
      height: 2em;
      line-height: 1.5em;
      padding: 0.25em 0.15em;
      border: none;
      font-size: 143%;
      font-weight: $light;
    }

    input:focus {
      position: relative;
      z-index: 1;
      outline: none;
    }
  }

  .login__auth-message {
    opacity: 0;
    margin-top: 8px;
    margin-bottom: 0;

    &.is-error {
      color: $red;
      text-align: center;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
  }

  .login__actions {
    margin-top: 22px;
    text-align: center;
    color: $gray;
  }

  .button-primary {
    width: 100%;
    min-height: 47px; // so that the button doesn't get smaller with the spinner
    display: flex;
    justify-content: center; // centers spinner
    align-items: center;
  }

  .login__forgot {
    a {
      color: inherit;
      text-decoration: none;
    }
  }

  .login__signup {
    margin-top: 1em;

    a {
      font-weight: $bold;
    }
  }
}

.login__or {
  text-align: center;
  margin: 20px 0 12px;
}

.login__btn-wpcom {
  button {
    color: $gray;
    width: 100%;
  }
}

.login__btn-wpcom-icon {
  svg {
    margin-right: 6px;
    width: 32px;
    height: 32px;

    path {
      fill: $blue;
    }
  }
}

.theme-dark .login__logo svg {
  border-radius: 0;
  border: none;
}
